import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class ChildCounter extends Component{
    //设置默认属性
    static defaultProps = {title:'子计数器'}
    //执行初始化
    constructor(props){//{number:5}
        super(props);//this.props = props;就是把传递进来的属性对象挂载到当前的实例的props属性上
        this.state = {number:0};//初始化状态
        console.log('ChildCounter 1.constructor')
    }
    componentDidMount(){
        console.log('ChildCounter 4.componentDidMount')
    }
    shouldComponentUpdate(nextProps,nextState){
        //nextProps新的属性对象 nextState新的状态对象
        console.log('ChildCounter 5.shouldComponentUpdate')
        //如果新的状态是偶数就更新，奇数就不更新。更新指的是修改浏览器的页面，但是状态本身肯定是会更新的
        return true;
    }
    componentDidUpdate(){
        console.log('ChildCounter 7.componentDidUpdate')
    }
    componentWillUnmount(){
        //componentWillUnmount是唯一的一个没将要废弃的will方法，也是唯 一的是不需要加UNSAFE_的方法
        console.log('ChildCounter 9.componentWillUnmount')
    }
    static getDerivedStateFromProps(nextProps,prevState){
        const {count} = nextProps;
        if(count %2 === 0){
            return {number:count*2};//返回新的状态对象
        }else if(count%3 === 0){
            return {number:count*3};
        }else{
            return null;//不改状态
        }
    }
    render(){
        console.log('ChildCounter 3.render')
        return (
            <div>
                <p>{this.props.title}:{this.state.number}</p>
            </div>
        )
    }
}

class Counter extends Component{
    //设置默认属性
    static defaultProps = {title:'父计数器'}
    //执行初始化
    constructor(props){//{number:5}
        super(props);//this.props = props;就是把传递进来的属性对象挂载到当前的实例的props属性上
        this.state = {number:0};//初始化状态
        console.log('1.constructor')
    }
    componentDidMount(){
        console.log('4.componentDidMount')
    }
    shouldComponentUpdate(nextProps,nextState){
        //nextProps新的属性对象 nextState新的状态对象
        console.log('5.shouldComponentUpdate')
        //如果新的状态是偶数就更新，奇数就不更新。更新指的是修改浏览器的页面，但是状态本身肯定是会更新的
        return true;
    }
    componentDidUpdate(){
        console.log('7.componentDidUpdate')
    }
    handleClick = ()=>{
        this.setState({number:this.state.number+1});
    }
    render(){
        console.log('3.render')
        return (
            <div>
                <p>{this.props.title}:{this.state.number}</p>
                {
                    this.state.number===4?null:<ChildCounter count={this.state.number}/>
                }
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}
let element = <Counter/>
let root = createRoot(document.getElementById('root'))
root.render(element);
